<template>
  <div class="interview-record">
    <div class="header">
      <router-link to="/main/biao" class="back-btn">
        <i class="el-icon-arrow-left"></i> 返回
      </router-link>
      <h2>面试记录表</h2>
    </div>

    <div class="form-container">

    <div class="button-group">
        <el-button v-if="!isViewMode" type="primary" @click="saveData">保存</el-button>
        <el-button v-if="isViewMode" type="primary" @click="editRecord">编辑</el-button>
        <el-button @click="goToList">返回列表</el-button>
      </div>
      <table>
        <!-- 基本信息部分 -->
        <tr class="section-header">
          <td colspan="6">基本信息</td>
        </tr>
        <tr>
          <td class="label">应聘职位：</td>
          <td><el-input v-model="formData.position" :disabled="isViewMode" class="form-input" /></td>
          <td class="label">姓 名</td>
          <td><el-input v-model="formData.name" :disabled="isViewMode" class="form-input" /></td>
          <td class="label">年 龄</td>
          <td><el-input v-model="formData.age" :disabled="isViewMode" class="form-input" type="number" /></td>
        </tr>
        <tr>
          <td class="label">面试时间</td>
          <td>
            <el-date-picker
              v-model="formData.interviewTime"
              type="datetime"
              :disabled="isViewMode"
              placeholder="选择面试时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              class="form-input"
            ></el-date-picker>
          </td>
          <td class="label">性 别</td>
          <td class="radio-group">
            <el-radio v-model="formData.gender" label="男" :disabled="isViewMode">男</el-radio>
            <el-radio v-model="formData.gender" label="女" :disabled="isViewMode">女</el-radio>
          </td>
          <td class="label">可到职日期</td>
          <td>
            <el-date-picker
              v-model="formData.availableDate"
              type="datetime"
              :disabled="isViewMode"
              placeholder="选择到职时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              class="form-input"
            ></el-date-picker>
          </td>
        </tr>
        <tr>
          <td class="label">学 历</td>
          <td colspan="5">
            <el-select v-model="formData.education" :disabled="isViewMode" class="form-input">
              <option value="">请选择</option>
              <option value="高中">高中</option>
              <option value="专科">专科</option>
              <option value="本科">本科</option>
              <option value="硕士">硕士</option>
              <option value="博士">博士</option>
            </el-select>
          </td>
        </tr>

        <!-- 面试评价部分 -->
        <tr class="section-header">
          <td colspan="3">招聘组面试结果</td>
          <td colspan="3">用人部门负责人复试</td>
        </tr>
        <tr class="sub-header">
          <td>序号</td>
          <td>面试项目</td>
          <td>面试评价</td>
          <td>序号</td>
          <td>面试项目</td>
          <td>面试评价</td>
        </tr>
        <!-- 招聘组面试评价 -->
        <tr v-for="(item, index) in recruitmentItems" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item }}</td>
          <td>
            <input type="radio" v-model="formData.recruitmentEvaluations[index]" value="优秀" :disabled="isViewMode" /> 优秀
            <input type="radio" v-model="formData.recruitmentEvaluations[index]" value="良好" :disabled="isViewMode" /> 良好
            <input type="radio" v-model="formData.recruitmentEvaluations[index]" value="一般" :disabled="isViewMode" /> 一般
            <input type="radio" v-model="formData.recruitmentEvaluations[index]" value="差" :disabled="isViewMode" /> 差
          </td>
          <!-- 用人部门复试评价 -->
          <td v-if="index < departmentItems.length">{{ index + 1 }}</td>
          <td v-if="index < departmentItems.length">{{ departmentItems[index] }}</td>
          <td v-if="index < departmentItems.length">
            <el-input v-model="formData.departmentEvaluations[index]" :disabled="isViewMode" />
          </td>
        </tr>

        <!-- 面试意见部分 -->
        <tr class="section-header">
          <td colspan="6">面试意见</td>
        </tr>
        <tr>
          <td>建议性工资</td>
          <td><el-input v-model="formData.suggestedSalary" :disabled="isViewMode" /></td>
          <td rowspan="5">
            <div>
              <input type="checkbox" v-model="formData.initialOpinions[0]" :disabled="isViewMode" /> 拟予复试
              <input type="checkbox" v-model="formData.initialOpinions[1]" :disabled="isViewMode" /> 列入考虑
              <input type="checkbox" v-model="formData.initialOpinions[2]" :disabled="isViewMode" /> 不予考虑
            </div>
            <div>薪资面谈人签名: <el-input v-model="formData.initialInterviewerSignature" :disabled="isViewMode" class="form-input" /></div>
            <div>
              日期: 
              <el-date-picker
                v-model="formData.initialInterviewDate"
                type="datetime"
                :disabled="isViewMode"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                class="form-input"
              ></el-date-picker>
            </div>
          </td>
          <td>确认工资</td>
          <td><el-input v-model="formData.confirmedSalary" :disabled="isViewMode" /></td>
          <td rowspan="5">
            <div>
              <input type="checkbox" v-model="formData.reviewOpinions[0]" :disabled="isViewMode" /> 拟予录用
              <input type="checkbox" v-model="formData.reviewOpinions[1]" :disabled="isViewMode" /> 拟予复试
              <input type="checkbox" v-model="formData.reviewOpinions[2]" :disabled="isViewMode" /> 不予考虑
            </div>
            <div>薪资面谈人签名: <el-input v-model="formData.reviewInterviewerSignature" :disabled="isViewMode" class="form-input" /></div>
            <div>
              日期: 
              <el-date-picker
                v-model="formData.reviewInterviewDate"
                type="datetime"
                :disabled="isViewMode"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                class="form-input"
              ></el-date-picker>
            </div>
          </td>
        </tr>
        <tr>
          <td>试用期</td>
          <td><el-input v-model="formData.probationPeriod" :disabled="isViewMode" /></td>
          <td>试用期工资</td>
          <td><el-input v-model="formData.probationSalary" :disabled="isViewMode" /></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>试用期绩效</td>
          <td><el-input v-model="formData.probationPerformance" :disabled="isViewMode" /></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>转正后工资</td>
          <td><el-input v-model="formData.regularSalary" :disabled="isViewMode" /></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>转正后绩效</td>
          <td><el-input v-model="formData.regularPerformance" :disabled="isViewMode" /></td>
        </tr>

        <!-- 各级意见部分 -->
        <tr class="section-header">
          <td colspan="6">各级意见</td>
        </tr>
        <tr>
          <td>用人部门主管意见</td>
          <td><el-input v-model="formData.departmentSupervisorOpinion" :disabled="isViewMode" /></td>
          <td>用人部门经理意见</td>
          <td><el-input v-model="formData.departmentManagerOpinion" :disabled="isViewMode" /></td>
          <td>用人部门部长/总监意见</td>
          <td><el-input v-model="formData.departmentDirectorOpinion" :disabled="isViewMode" /></td>
        </tr>
        <tr>
          <td>总经理意见</td>
          <td><el-input v-model="formData.generalManagerOpinion" :disabled="isViewMode" /></td>
          <td>总裁/董事长复试意见</td>
          <td><el-input v-model="formData.presidentOpinion" :disabled="isViewMode" /></td>
          <td>企业管理部意见</td>
          <td><el-input v-model="formData.managementDepartmentOpinion" :disabled="isViewMode" /></td>
        </tr>
      </table>

      <div class="notes">
        <h3>说明：</h3>
        <ul>
          <li>招聘组面试结果，分别为优秀、良好、一般、差四种，以打"√"的形式做出评价；</li>
          <li>以上工资要求统一为综合工资，薪资构成以公司薪资制度为准；</li>
          <li>经理级（含副经理）以上人员须经总裁复试；</li>
          <li>面试加注意见后，请及时将信息反馈至企业管理部招聘组；</li>
          <li>用人部门确认薪资时需明确注明试用期工资、试用期绩效与转正后工资、转正后绩效。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import interviewRecordApi from '@/api/interviewRecord';
import { formatDateTime } from '@/utils/date';

export default {
  data() {
    return {
      isViewMode: false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }],
        disabledDate(time) {
          // 禁用过去的日期（可选配置）
          // return time.getTime() < Date.now() - 8.64e7;
        }
      },
      formData: {
        id: null,
        position: '',
        name: '',
        age: '',
        interviewTime: '',
        gender: '',
        education: '',
        availableDate: '',
        recruitmentEvaluations: Array(10).fill(''),
        departmentEvaluations: Array(5).fill(''),
        suggestedSalary: '',
        initialOpinions: [false, false, false],
        initialInterviewerSignature: '',
        initialInterviewDate: '',
        confirmedSalary: '',
        probationPeriod: '',
        probationSalary: '',
        probationPerformance: '',
        regularSalary: '',
        regularPerformance: '',
        reviewOpinions: [false, false, false],
        reviewInterviewerSignature: '',
        reviewInterviewDate: '',
        departmentSupervisorOpinion: '',
        departmentManagerOpinion: '',
        departmentDirectorOpinion: '',
        generalManagerOpinion: '',
        presidentOpinion: '',
        managementDepartmentOpinion: ''
      },
      recruitmentItems: [
        '形象仪容',
        '语言表达',
        '工作心态',
        '外语水平',
        '专业知识',
        '发展潜力',
        '工作经验',
        '计算机能力',
        '综合知识',
        '综合评价'
      ],
      departmentItems: [
        '专业知识技能',
        '工作能力经验',
        '发展潜力/预测',
        '综合知识/经验',
        '综合性评价'
      ]
    };
  },
  mounted() {
    const id = this.$route.query.id;
    const mode = this.$route.query.mode;
    if (id) {
      this.formData.id = id;
      this.isViewMode = mode === 'view';
      this.fetchData(id);
    }
  },
  methods: {
    async fetchData(id) {
      try {
        const response = await interviewRecordApi.getDetail(id);
        if (response.data) {
          const data = response.data;
          // 处理日期输入格式
          ['interviewTime', 'availableDate', 'initialInterviewDate', 'reviewInterviewDate'].forEach(field => {
            if (data[field]) {
              data[field] = formatDateTime(data[field]);
            }
          });
          this.formData = data;
        }
      } catch (error) {
        console.error('获取数据失败', error);
        this.$message.error('获取数据失败：' + (error.response?.data || error.message));
      }
    },
    async saveData() {
      try {
        const formDataToSend = { ...this.formData };
        // 处理日期格式
        ['interviewTime', 'availableDate', 'initialInterviewDate', 'reviewInterviewDate'].forEach(field => {
          if (formDataToSend[field]) {
            formDataToSend[field] = formatDateTime(formDataToSend[field]);
          }
        });
        const response = await interviewRecordApi.save(formDataToSend);
        if (response.data) {
          this.$message.success('保存成功');
          this.goToList();
        }
      } catch (error) {
        console.error('保存失败', error);
        this.$message.error('保存失败：' + (error.response?.data || error.message));
      }
    },
    editRecord() {
      // 切换到编辑模式
      this.$router.push(`/main/biao/mianshijl?id=${this.formData.id}`);
    },
    goToList() {
      this.$router.push('/main/biao/mianshijl-list');
    }
  }
};
</script>

<style scoped>
.interview-record {
  padding: 32px;
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  background: #ffffff;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
}

.header h2 {
  font-size: 1.2em;
  color: #2c3e50;
  margin: 0;
  font-weight: 600;
  letter-spacing: 1px;
}

.back-btn {
  text-decoration: none;
  color: #409EFF;
  display: flex;
  align-items: center;
  margin-right: 32px;
  font-size: 16px;
  transition: all 0.3s ease;
  padding: 8px 16px;
  border-radius: 6px;
  background: #f0f7ff;
}

.back-btn:hover {
  color: #66b1ff;
  transform: translateX(-3px);
  background: #e6f1ff;
}

.form-container {
  background: #ffffff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 32px;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

td {
  border: 1px solid #ebeef5;
  padding: 16px 20px;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s ease;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  text-align: center;
}

td:hover {
  background-color: #f5f7fa;
}

.label {
  background: #f5f7fa;
  font-weight: 600;
  width: 140px;
  /* text-align: right; */
  color: #2c3e50;
}

.section-header {
  background: #409EFF;
  color: white;
  font-weight: 600;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.section-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.sub-header {
  background: #f5f7fa;
  font-weight: 600;
  text-align: center;
  color: #2c3e50;
  padding: 12px;
}

.form-input {
  width: 100%;
  /* padding: 12px 16px;
  border: 1px solid #dcdfe6; */
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  color: #606266;
  background-color: #ffffff;
}

.form-input:hover {
  border-color: #c0c4cc;
}

.form-input:focus {
  border-color: #409EFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.form-input:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
  color: #909399;
}

.radio-group {
  padding: 8px 0;
  height: 100%;
}

.el-radio {
  margin-right: 0;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-radio:hover {
  background-color: #f5f7fa;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0;
}

.button-group .el-button {
  background: #409EFF;
  border: none;
  color: white;
  padding: 14px 32px;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  min-width: 120px;
}

.button-group .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.2);
  background: #66b1ff;
}

.notes {
  background: #ffffff;
  padding: 24px 32px;
  border-radius: 16px;
  margin-top: 32px;
  border: 1px solid #ebeef5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.notes h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  /* font-size: 20px; */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: left;
}

.notes ul {
  padding-left: 28px;
  margin: 0;
  text-align: left;
}

.notes li {
  color: #606266;
  line-height: 2;
  margin-bottom: 12px;
  position: relative;
  padding-left: 8px;
}

.notes li::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 14px;
  width: 8px;
  height: 8px;
  background: #409EFF;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 优化日期选择器样式 */
.el-date-editor.el-input {
  width: 100%;
}

.el-date-editor .el-input__inner {
  padding: 0 12px 0 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
}

.el-date-editor .el-input__inner:hover {
  border-color: #c0c4cc;
}

.el-date-editor .el-input__inner:focus {
  border-color: #409EFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

/* 优化评价选项样式 */
.evaluation-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.evaluation-option {
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.evaluation-option:hover {
  background-color: #f5f7fa;
}

/* 响应式布局优化 */
@media screen and (max-width: 1200px) {
  .interview-record {
    padding: 24px;
  }

  .form-container {
    padding: 24px;
  }
}

@media screen and (max-width: 768px) {
  .interview-record {
    padding: 16px;
  }

  .form-container {
    padding: 16px;
  }

  .header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .back-btn {
    margin-right: 0;
  }

  td {
    padding: 12px;
  }

  .label {
    width: 100px;
  }

  .section-header {
    padding: 16px;
    font-size: 16px;
  }

  .button-group {
    flex-direction: column;
    padding: 0;
  }

  .button-group .el-button {
    width: 100%;
  }

  .notes {
    padding: 16px;
  }
}

/* 打印样式优化 */
@media print {
  .interview-record {
    padding: 0;
    background: white;
    max-width: none;
  }

  .header {
    box-shadow: none;
    padding: 20px 0;
    margin-bottom: 24px;
  }

  .form-container {
    box-shadow: none;
    padding: 0;
  }

  .button-group {
    display: none;
  }

  .notes {
    border: none;
    padding: 20px 0;
    box-shadow: none;
  }

  .section-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
::v-deep .el-form-item {
    margin-left: 0px !important;
}
</style>